import React from 'react';
import {Card,Modal, Buton, Select, message,Form,Button,Table,DatePicker} from 'antd';
import axios from './../../axios';
import Utils from './../../utils/utils'; 
import BaseForm from '../../components/BaseForm/index';
import ETable from '../../components/ETable';

const FormItem = Form.Item
const Option = Select.Option
export default class Dingdan extends React.Component{
        state = {
            orderInfo:{},
            orderConfirmVisible:false
        }
        params = {
            page:1
        }
        formList = [
            {
                type:"SELECT",
                label:"城市",
                field:'city',
                placeholder:"全部",
                initialValue:"1",
                width:100,
                list:[
                {id: "0", name: "全部"},
                {id: "1", name: "北京"},
                {id: "2", name: "天津"},
                {id: "3", name: "黑龙江"},
            ]
            },
            {
                type:"时间查询"
            },
            {
                type:"ONE",
                label:"订单状态",
                field:'order_status',
                placeholder:"全部",
                initialValue:"1",
                width:100,
                list:[
                {id: "0", name: "全部"},
                {id: "1", name: "进行中"},
                {id: "2", name: "结束了"},
            ]
            },
            // {
            //     type:"INPUT",
            //     label:"模式",
            //     field:'mode',
            //     placeholder:"请输入模式",
            //     width:100,
            // },

        ]
        componentDidMount() {
            this.requestList()
            console.log(this.state.list)
        }
        requestList = () => {
            const _this = this;
            axios.requestList(this,'/order/list',this.params,true)
            // axios.ajax({
            //     url:"/order/list",
            //     data:{
            //         params:{
            //             page:this.params.page 
            //         },
            //         isShowLoading:false
            //     }
            // }).then((res) => {
            //     let list = res.result.item_list.map((item, index) => {
            //         item.key = index;
            //         return item;
            //     });
            //     this.setState({
            //         list:list,
            //         //current是一个回调  存储页码
            //         pagination:Utils.pagination(res,(current)=>{
            //             _this.params.page = current;
            //             _this.requestList();
            //         })
            //     })
            // })
        }
        //订单结束确认
        handleConfirm = () => {
            let item = this.state.selectedItem;
            if(!item) {
                Modal.info({
                    title:"信息",
                    content:"请选择一个订单结束"
                })
                return;
            } 
            axios.ajax({
                url:'/order/ebike_info',
                data:{
                    params:{
                        orderId:item.id
                    }
                }
            }).then((res) => {
                if(res.code == 0) {
                    this.setState({
                        orderInfo:res.result,
                        orderConfirmVisible:true
                    })
                    this.requestList()
                }
            })
           
        }
        //结束订单
        handleFinishOrder = () => {
            let item = this.state.selectedItem;
            axios.ajax({
                url:'/order/finish_order',
                data:{
                    params:this.params
                }
            }).then((res) => {
                if(res.code == 0) {
                    message.success('订单结束')
                    this.setState({
                        orderConfirmVisible:false
                    })
                    this.requestList()
                }
            })
        }
        //点击行de时候
        // onRowClick =(record,index) => {
        //     console.log(record)
        //     let selectKey = [index];
        //     this.setState({
        //         selectedRowKeys:selectKey,
        //         selectedItem:record
        //     })
        // }
        openOrderDetail = () => {
            let item = this.state.selectedItem;
            if(!item) {
                Modal.info({
                    title:"信息",
                    content:"请选择一个订单"
                })
                return;
            } 
            window.open(`/#/common/order/detail/${item.id}`,'_blank')
            // window.location.href = `/#/common/order/detail/${item.id}`
        }
        handleFilter = (params) => {
            this.params = params;
            this.requestList()
        }
    render() {
        const columns = [ 
            {
                title:'订单编号',
                dataIndex:'order_sn'
            },
            {
                title: '车辆编号',
                dataIndex: 'bike_sn'
            },
            {
                title: '用户名',
                dataIndex: 'user_name'
            },
            {
                title: '手机号',
                dataIndex: 'mobile'
            },
            {
                title: '里程',
                dataIndex: 'distance',
                render(distance){
                    return distance/1000 + 'Km';
                }
            },
            {
                title: '行驶时长',
                dataIndex: 'total_time'
            },
            {
                title: '状态',
                dataIndex: 'status'
            },
            {
                title: '开始时间',
                dataIndex: 'start_time'
            },
            {
                title: '结束时间',
                dataIndex: 'end_time'
            },
            {
                title: '订单金额',
                dataIndex: 'total_fee'
            },
            {
                title: '实付金额',
                dataIndex: 'user_pay'
            }
        ]
        const formItemLayout = {
            labelCol:{span:5},
            wrapperCol:{span:19}
        }
        // const { selectedRowKeys} = this.state;
        // const rowSelection = {
        //     type:'radio',
        //     selectedRowKeys
        // }
        return (
            <div>
               <Card >
                    <BaseForm formList = {this.formList} filterSubmit={this.handleFilter}/>
               </Card>
               <Card style={{mrginTop:10}}>
                   <Button type="primary" onClick={this.openOrderDetail}>订单详情</Button>
                   <Button type="primary"  style={{marginLeft:10}} onClick={this.handleConfirm}>结束订单</Button>
               </Card>
               <div className="content-wrap">
                    <ETable 
                     updateSelectedItem={Utils.updateSelectedItem.bind(this)}
                     columns={columns}
                     selectedIds={this.state.selectedIds}
                     selectedItem = {this.state.selectedItem}
                     selectedRowKeys={this.state.selectedRowKeys}
                     pagination={this.state.pagination}
                     dataSource={this.state.list}
                    //  rowSelection = "checkbox"
                    //  rowSelection = {false}
                        //   //边框
                        //   bordered
                        //   //表头
                        //   columns={columns}
                        //   //数据源  跟表头映射  数据就出来了
                        //   dataSource={this.state.list}
                        //   // 分页
                        //   pagination={this.state.pagination}
                        //   //单选和复选
                        //   rowSelection = {rowSelection}
                        //   //配合单选复选使用  她是一个事件  当我们点击某一行的时候就选中了

                        //   onRow={(record,index) => {
                        //     return {
                        //         onClick:() => {
                        //             this.onRowClick(record,index)
                        //         }
                                
                                
                        //     }
                        // }}
                    />
               </div>
               <Modal
               title="结束订单"
               visible={this.state.orderConfirmVisible}
               onCancel = {() => {
                   this.setState({
                    orderConfirmVisible:false
                   })
               }}
               onOk= {this.handleFinishOrder}
               width={600}
               >
                <Form layout="horizontal">
                    <FormItem label="车辆编号" {...formItemLayout}>
                        {this.state.orderInfo.biek_sn}
                    </FormItem>
                    <FormItem label="剩余电量" {...formItemLayout}>
                        {this.state.orderInfo.battery + "%"}
                    </FormItem>
                    <FormItem label="行程开始时间" {...formItemLayout}>
                        {this.state.orderInfo.start_time}
                    </FormItem>
                    <FormItem label="当前位置" {...formItemLayout}>
                        {this.state.orderInfo.start_time}
                    </FormItem>
                </Form>
               </Modal>

            </div>
        )
    }
}
// class FilterFrom extends React.Component{
//     render() {
//         //getFieldDecorator实现双向绑定
//         const { getFieldDecorator} = this.props.form;
//         return (
//             <Form layout='inline'>
//                 <FormItem  label="城市" > 
//                     {
//                         getFieldDecorator('city_id')(
//                             <Select placeholder="全部" style={{width:100}}>
//                                 <Option value=''>全部</Option>
//                                 <Option value='1'>哈尔滨</Option>
//                                 <Option value='2'>北京</Option>
//                                 <Option value='3'>天津</Option>
//                             </Select>
//                         )
//                     } 
//                 </FormItem>

//                 <FormItem  label="订单时间" style={{margin:" 0 10px"}}> 
//                     {
//                         getFieldDecorator('start_time')(
//                             //DatePicker显示时间日期的
//                             <DatePicker showTime format="YYYY-MM-DD HH:mm:ss"  style={{marginRight: 20}} />
//                         )
//                     }

//                         {
//                         getFieldDecorator('end_time')(
//                             <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
//                         )
//                     }
//                 </FormItem>

//                 <FormItem  label="订单状态" > 
//                     {
//                         getFieldDecorator('order_status')(
//                             <Select placeholder="全部" style={{width:80}}>
//                                 <Option value=''>全部</Option>
//                                 <Option value='1'>进行中</Option>
//                                 <Option value='2'>结束行程</Option>
                              
//                             </Select>
//                         )
//                     }
//                 </FormItem>
//                 <FormItem   > 
//                     <Button type="primary" style={{margin:'0 20px'}}>查询</Button>
//                     <Button>重置</Button>
//                 </FormItem>
//             </Form>
//         )
//     }
// } 
// FilterFrom = Form.create({})(FilterFrom)